<template>
	<view class="nmd_loadingmore">
		<block v-if="listNum == 0">
			<!-- 1.无数据 -->
			<view class="nmd_con_noData">
				<image class="nmd_con_noData_img" :src="noImgStr" mode="widthFix"></image>
				<view>{{noDataStr}}</view>
			</view>
		</block>
		<block v-else>

			<!-- 2.到底提示 -->
			<view v-if="!isLastPage">
				<view class="nmd_no_more">加载更多...</view>
			</view>
			<view v-else class="nmd_no_more" :style="{'color':alertColor}">{{alertStr}}</view>
		</block>

	</view>
</template>

<script>
	export default {
		props: {
			// 1.暂无数据
			listNum: {
				default: 0,
				type: Number
			},

			noImgStr: {
				// 1.同目录下的引用写法
				default: require('./noData.png'),
				// 2.staic中的 图片引用写法
				// default: "/static/images/icon/customer.png",
				type: String
			},
			noDataStr: {
				default: " --暂无数据--",
				type: String
			},

			//2.加载底部提示
			isLastPage: {
				default: false,
				type: Boolean
			},

			// 3.提示文字
			alertStr: {
				default: "---已经到底了---",
				type: String
			},
			// 4.提示文字颜色
			alertColor: {
				default: "#757575",
				type: String
			}
		}
	}
</script>

<style>
	/* 1.暂无数据 */
	.nmd_con_noData {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;
		color: #999;
		font-size: 28rpx;
		line-height: 45rpx;
	}

	.nmd_con_noData_img {
		width: 70%;
		min-height: 100rpx;
		margin-bottom: 30rpx;
	}

	/*  2.加载更多   */
	.nmd_loadingmore {
		margin-top: 10rpx;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.nmd_no_more {
		color: #757575;
		font-size: 30rpx;
		margin: 30rpx 0;
		text-align: center;
	}
</style>